<template>
    <a-layout-header class="header">
        <div class="logo">降蓝的个人博客</div>
        <a-menu
                v-model:selectedKeys="current"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="/home">
                <router-link to="/">
                    首页
                </router-link>
            </a-menu-item>
            <a-menu-item key="/admin/user" :style="user.id? {} : {display: 'none'}">
                <router-link to="/admin/user">
                    用户书管理
                </router-link>
            </a-menu-item>
            <a-menu-item key="/admin/ebook" :style="user.id? {} : {display: 'none'}">
                <router-link to="/admin/ebook">
                    电子书管理
                </router-link>
            </a-menu-item>
            <a-menu-item key="/admin/category" :style="user.id? {} : {display: 'none'}">
                <router-link to="/admin/category">
                    分类管理
                </router-link>
            </a-menu-item>
            <a-menu-item key="/about">
                <router-link to="/about">
                    关于
                </router-link>
            </a-menu-item>


            <a class="login-menu" @click="showLoginModal" v-show="!user.id">
                <a-button type="primary"
                          shape="round"
                          :size="size"
                >
                    登录/注册
                </a-button>
            </a>


            <a class="login-menu"  v-show="user.id">
                <a-dropdown>
                    <template #overlay>
                        <a-menu >
                            <a-menu-item>
                                <router-link to="/Info">编辑资料</router-link>
                            </a-menu-item>
                            <a-menu-item @click="logout()">退出登陆</a-menu-item>
                        </a-menu>
                    </template>
                    <a-button
                            type="primary"
                            shape="round"
                            :size="small"
                    >
                        您好：{{user.name}}
                        <DownOutlined/>
                    </a-button>
                </a-dropdown>
            </a>
        </a-menu>


        <a-modal
                title="登录"
                v-model:visible="loginModalVisible"
                :confirm-loading="loginModalLoading"
                @ok="login"
                mask=true
        >
            <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="登录名">
                    <a-input v-model:value="loginUser.loginName"/>
                </a-form-item>
                <a-form-item label="密码">
                    <a-input v-model:value="loginUser.password" type="password"/>
                </a-form-item>

                <a src="#">忘记密码</a><br>
            </a-form>
        </a-modal>
    </a-layout-header>
</template>


<script lang="ts">
    import {defineComponent, ref, computed, onMounted} from 'vue';
    import axios from 'axios';
    import { message } from 'ant-design-vue';
    import store from "@/store";

    declare let hexMd5: any;
    declare let KEY: any;

    export default defineComponent({
        name: 'the-header',
        setup() {
            //  登录后保存
            const user = computed(() => store.state.user);

            //  用来登录
            const loginUser = ref({
                loginName: "",
                password: ""
            });

            const loginModalVisible = ref(false);
            const loginModalLoading = ref(false);
            const showLoginModal = () => {
                loginModalVisible.value = true;
            }

            // 登录
            const login = () => {
                loginModalLoading.value = true;
                loginUser.value.password = hexMd5(loginUser.value.password + KEY);
                axios.post('/user/login', loginUser.value).then((response) => {
                    loginModalLoading.value = false;
                    const data = response.data;
                    if (data.success) {
                        loginModalVisible.value = false;
                        message.success("登录成功！");

                        store.commit("setUser",data.content)
                    } else {
                        message.error(data.message);
                    }
                })
            }

            const edit = () => {
                message.warn("功能建设中...");
            }

            // 退出登录
            const logout = () => {
                axios.get('/user/logout/' + user.value.token).then((response) => {
                    const data = response.data;
                    if (data.success) {
                        message.success("退出登录成功！");
                        store.commit("setUser", {});
                    } else {
                        message.error(data.message);
                    }
                });
            };


            return {
                loginModalVisible,
                loginModalLoading,
                showLoginModal,
                loginUser,
                login,
                user,
                logout,
                edit
            }
        }
    });
</script>

<style>
    .logo {
        width: 140px;
        height: 31px;
        background: rgba(255, 255, 255, 0);
        margin: 20px 20px 16px 20px;
        float: left;
        color: black;
        font-size: 18px;
    }

    .login-menu {
        float: right;
        color: black;
        width: 15%;

    }
</style>
